//获取首页数据
async function getData() {
  // 发送请求
  try {
    const res = await axios.get("/dashboard");
    // console.log(res);
    const { groupData, overview, provinceData, salaryData, year } = res.data;
    // console.log(res.data);
    // 渲染概览区域
    // 1.左侧薪资分布折线图
    renderOverview(overview);
    // 2.右侧薪资分布饼状图
    salaryBing(salaryData);
    // 3.渲染学员分布地图
    studentsMap(provinceData);
    // 4.渲染男女薪资分布图
    genderSalary(salaryData);
    // 5.渲染小组薪资
    groupEcharts(groupData);
    // console.log(year);
    // console.log(salaryData);
    console.log(groupData);
    salaryEcharts(year);
  } catch (e) {
    // console.log(e.response);
  }
}
getData();
// 渲染概览区域
function renderOverview(data) {
  console.log(data);
  for (const k in data) {
    document.querySelector(`[name=${k}]`).innerHTML = data[k];
  }
}
// 渲染薪资区域的样式  折线图
function salaryEcharts(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("line"));

  // 指定图表的配置项和数据
  let option = {
    // 标题样式
    title: {
      text: "2023全学科薪资走势",
      // 字体样式
      textStyle: {
        color: "#528def",
        fontSize: 22,
      },
      left: "2%",
      top: "3%",
    },
    //  调整图标位置
    grid: {
      left: "10%",
      top: "20%",
    },
    // 鼠标跟踪 x y 轴移动
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "deepskyblue",
        },
      },
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      // 设置y轴的线为虚线
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "red",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        // 表格的类型
        type: "line",
        // 是否平滑
        smooth: true,
        lineStyle: {
          color: "#528def",
          width: 6,
        },
        // 小圆点大小
        symbolSize: 8,
        // 拐点处的样式 即小圆点的样式 颜色
        itemStyle: {
          color: "#5aaafe",
        },
        // 设置区域阴影面积
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#5aaafe", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    // 全局调色盘
    color: ["aquamari"],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

//  渲染右侧薪资分布样式 饼状图
function salaryBing(salary) {
  var chartDom = document.getElementById("salary");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "班级薪资分布",
      top: "3%",
      left: "3%",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
      orient: "horizontal",
      itemWidth: 14, // 图例标记的宽度
      itemHeight: 14, // 图例标记的高度
      itemGap: 10, // 图例之间的间距
    },
    series: [
      {
        name: "班级薪资分布",
        type: "pie",
        radius: ["45%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 3,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: salary.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label,
          };
        }),
      },
    ],
    color: ["#34d39a", "#3fceff", "#5097ff", "#fda224"],
  };

  option && myChart.setOption(option);
}

// 渲染学员分布图
function studentsMap(data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("map"));
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  // 处理数据
  dataList.map((item) => {
    // item 为dataList中的每个对象 如： { name: "北京", value: 0 },
    data.find((v) => {
      //  console.log(v);  // v 为后台返回的provinceData中学生分布信息  如：{name: '山东省', value: 3}
      if (v.name.indexOf(item.name) === 0) {
        item.value = v.value;
        // console.log(v.name.indexOf(item.name));
        // console.log(item.name);
        // console.log(v.name);
      }
    });
  });
  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 15,
      left: "left",
      bottom: "20",
      text: ["15", "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 渲染男女薪资分布图
function genderSalary(data) {
  var chartDom = document.getElementById("gender");
  var myChart = echarts.init(chartDom);
  var option;
  // 遍历从后台取得的值 salaryData 分别取得男生和 女生的数据
  var datas = [
    data.map((item) => {
      //  console.log(item);
      return {
        name: item.label,
        value: item.b_count,
      };
    }),
    data.map((item) => {
      //  console.log(item);
      return {
        name: item.label,
        value: item.g_count,
      };
    }),
  ];
  option = {
    title: [
      {
        text: "男女薪资分布",
        left: "2%",
        top: "2%",
        textStyle: {
          color: "#5097ff",
          fontWeight: "700",
          fontSize: 16,
        },
      },
      {
        subtext: "男生",
        left: "50%",
        top: "45%",
        textAlign: "center",
        subtextStyle: {
          color: "#333",
          fontWeight: "700",
          fontSize: 16,
        },
      },
      {
        subtext: "女生",
        left: "50%",
        top: "93%",
        textAlign: "center",
        subtextStyle: {
          color: "#333",
          fontWeight: "700",
          fontSize: 16,
        },
      },
    ],
    series: datas.map(function (data, idx) {
      var top = idx * 50;
      return {
        name: "男女薪资分布",
        type: "pie",
        radius: ["40%", " 65%"],
        avoidLabelOverlap: true,
        top: top + "%",
        height: "50%",
        left: "center",
        width: 400,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        labelLine: {
          length: 15,
          length2: 1,
          maxSurfaceAngle: 80,
        },
        data: data,
      };
    }),
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
  };

  option && myChart.setOption(option);
}

// 渲染小组薪资
function groupEcharts(data) {
  var chartDom = document.getElementById("lines");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: "category",
      data: data[1].map((item) => item.name),
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "d3d3d3",
        },
      },
    },
    series: [
      {
        data: data[1].map((item) => item.hope_salary),
        type: "bar",
      },
      {
        data: data[1].map((item) => item.salary),
        type: "bar",
      },
    ],
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#3fd59f", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#c7f2e3", // 100% 处的颜色
          },
        ],

        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#52a4ee", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#cde4fa", // 100% 处的颜色
          },
        ],

        global: false, // 缺省为 false
      },
    ],
  };

  option && myChart.setOption(option);
  // 生成btn按钮
  const btn = document.querySelector("#btns");
  const arr = [];
  for (const k in data) {
    arr.push(`<button type="button" class="btn btn-xs ">${k}</button>`);
  }
  btn.innerHTML = arr.join("");
  //默认给第一个btn添加高亮
  btn.children[0].classList.add("btn-blue");
  // 点击切换小组数据（事件委托）
  btn.addEventListener("click", (e) => {
    // 排他思想 处理高亮
    document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
    e.target.classList.add("btn-blue");
    // 切换数据
    // 拿到小组号
    const index = e.target.innerHTML.trim();
    // X轴信息
    option.xAxis.data = data[index].map((item) => item.name);
    option.series[0].data = data[index].map((item) => item.hope_salary);
    option.series[1].data = data[index].map((item) => item.salary);
    // 重新设置
    option && myChart.setOption(option);
  });
}
